<template>
  <div class='sub-category'>
    <van-grid :column-num="3" :gutter="12">
      <van-grid-item
        v-for="sub in subCategories"
        :key="sub.id"
        :icon="sub.imageUrl"
        :text="sub.title"
      />
    </van-grid>
  </div>
</template>

<script>
import { getSubCategories } from '../../api/category'
export default {
  name: 'SubCategory',
  data() {
    return {
      subCategories: [], // 所有子分类
    }
  },
  created() {
    // 只执行一次，当组件被复用时，只第一次创建组件实例时调用，以后不再重复调用
    // console.log(this.$route.query)
  },
  watch: {
    // 当导航路径切换变化时，执行
    $route: {
      // 处理器
      handler(newVal) {
        // console.log('路径变化了:', newVal.query.id)
        // 获取路径中传递的查询字符串参数
        const { id } = newVal.query
        // 根据 id 查询该分类下的子分类数据
        getSubCategories(id)
          .then(data => {
            // console.log('子分类：', data)
            this.subCategories = data
          })
          .catch(console.log)
      },
      immediate: true, // 组件实例创建时，立刻调用 handler 处理器
    },
  },
}
</script>

<style lang='less' scoped>

</style>
